import React, {Component} from 'react';
import {View,Text, StyleSheet, Image, TouchableHighlight} from 'react-native';
import Swiper from 'react-native-swiper'
import {Actions} from 'react-native-router-flux'

class Home extends Component {
  constructor(props){
    super(props)
    this.state = {
      swiperInfo: []
    }
  }
  render() {
    return (
      <View>
        {/*轮播图*/}
        <View style={{height:220}}>
          <Swiper showsButtons={true} autoplay={true}>
            {
              this.state.swiperInfo.map(item => {
                return <View key={item.id}>
                  <Image source={{uri: item.img}} style={{width:'100%',height:'100%'}}/>
                </View>
              })
            }
          </Swiper>
        </View>
        <View style={{flexDirection:'row',flexWrap:'wrap'}}>
          <View style={styles.imgStyle}>
            <Image source={require('../../image/8.gif')}></Image>
            <Text style={styles.textStyle}>新闻资讯</Text>
          </View>
          <View style={styles.imgStyle}>
            <Image source={require('../../image/8.gif')}></Image>
            <Text style={styles.textStyle}>图片分享</Text>
          </View>
          <View style={styles.imgStyle}>
            <Image source={require('../../image/8.gif')}></Image>
            <Text style={styles.textStyle}>商品购买</Text>
          </View>
          <View style={styles.imgStyle}>
            <Image source={require('../../image/8.gif')}></Image>
            <Text style={styles.textStyle}>留言反馈</Text>
          </View>
          <TouchableHighlight style={styles.imgStyle} onPress={this.goMovieList} underlayColor="#fff">
            <View>
              <Image source={require('../../image/8.gif')}></Image>
              <Text style={styles.textStyle}>热映电影</Text>
            </View>
          </TouchableHighlight>
          <View style={styles.imgStyle}>
            <Image source={require('../../image/8.gif')}></Image>
            <Text style={styles.textStyle}>联系我们</Text>
          </View>
        </View>
      </View>
    );
  }
  componentDidMount(){
    fetch('http://www.liulongbin.top:3005/api/getlunbo')
      .then(res => res.json())
      .then(data => {
        this.setState({
          swiperInfo: data.message
        })
      })
  }
  // 点击'放映电影'按钮，前往电影列表页面
  goMovieList = () => {
    Actions.movieList()
  }
}

const styles = StyleSheet.create({
  imgStyle:{
    width:'33.33%',
    alignItems: 'center',
    marginTop: 15,
  },
  textStyle:{
    color: 'gray',
    fontSize: 12
  }
})
export default Home;
